import React from 'react'
import { useNavigate, useParams } from 'react-router-dom'

interface TestResult {
  itemName: string
  result: string
  referenceValue: string
  isAbnormal: boolean
  isHigh: boolean
  isLow: boolean
}

interface TestReportDetail {
  id: number
  title: string
  patientName: string
  patientGender: string
  patientAge: number
  referringDoctor: string
  referringDepartment: string
  referralTime: string
  reportTime: string
  reportCategory: string
  testResults: TestResult[]
  examiner: string
  reviewer: string
  note: string
}

function TestReportDetail() {
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()

  // 模拟数据
  const reportDetail: TestReportDetail = {
    id: parseInt(id || '1'),
    title: '血常规 (成人)',
    patientName: '王小柯',
    patientGender: '女',
    patientAge: 28,
    referringDoctor: '王小小',
    referringDepartment: '门诊化验科',
    referralTime: '2020-01-01 10:20:36',
    reportTime: '2020-01-20 20:20:30',
    reportCategory: '门诊/住院',
    testResults: [
      {
        itemName: '无机磷酸盐',
        result: '1.25 (mmol/L)',
        referenceValue: '0.85 - 1.51',
        isAbnormal: false,
        isHigh: false,
        isLow: false
      },
      {
        itemName: '降钙素原测定',
        result: '0.27 (ng/ml)',
        referenceValue: '≤1.0',
        isAbnormal: false,
        isHigh: false,
        isLow: false
      },
      {
        itemName: '高敏C反应蛋白',
        result: '5.48 (mg/L)',
        referenceValue: '≤5.00',
        isAbnormal: true,
        isHigh: true,
        isLow: false
      }
    ],
    examiner: '李医生',
    reviewer: '王医生',
    note: '此结果仅作参考,以医院纸质报告为准'
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: '#f5f5f5',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)'
    }}>
      {/* 头部 */}
      <div style={{
        background: 'white',
        padding: '16px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <button 
          onClick={() => navigate(-1)} 
          title="返回"
          style={{
            background: 'none',
            border: 'none',
            fontSize: '20px',
            color: '#333',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}
        >←</button>
        <h1 style={{
          margin: 0,
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>检验报告详情</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>⋯</span>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>◎</span>
        </div>
      </div>

      {/* 报告标题和患者信息 */}
      <div style={{
        background: 'white',
        margin: '16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <h2 style={{
          margin: '0 0 16px 0',
          fontSize: '20px',
          fontWeight: '700',
          color: '#333',
          lineHeight: '1.4'
        }}>{reportDetail.title}</h2>
        
        <div style={{
          fontSize: '16px',
          color: '#333',
          marginBottom: '16px'
        }}>
          {reportDetail.patientName} {reportDetail.patientGender} {reportDetail.patientAge}岁
        </div>

        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
          fontSize: '14px',
          color: '#666'
        }}>
          <div>送检医师: {reportDetail.referringDoctor}</div>
          <div>送检科室: {reportDetail.referringDepartment}</div>
          <div>送检时间: {reportDetail.referralTime}</div>
          <div>报告时间: {reportDetail.reportTime}</div>
          <div>报告类别: {reportDetail.reportCategory}</div>
        </div>
      </div>

      {/* 检验结果 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px'
        }}>
          <h3 style={{
            margin: 0,
            fontSize: '18px',
            fontWeight: '600',
            color: '#333'
          }}>检验结果</h3>
          <div style={{
            color: '#1677ff',
            fontSize: '14px',
            cursor: 'pointer'
          }}>
                         申请检验复印 ›
          </div>
        </div>

        {/* 图例说明 */}
        <div style={{
          display: 'flex',
          gap: '16px',
          marginBottom: '16px',
          fontSize: '12px',
          color: '#666'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
            <div style={{
              width: '12px',
              height: '12px',
              background: '#ff4d4f',
              borderRadius: '2px'
            }}></div>
            <span>异常指标</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
            <span style={{ color: '#ff4d4f' }}>⬆</span>
            <span>指标偏高</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
            <span style={{ color: '#ff4d4f' }}>⬇</span>
            <span>指标偏低</span>
          </div>
        </div>

        {/* 结果表格 */}
        <div style={{
          border: '1px solid #f0f0f0',
          borderRadius: '8px',
          overflow: 'hidden'
        }}>
          {/* 表头 */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '2fr 1fr 1fr',
            background: '#f8f9fa',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <div style={{
              padding: '12px',
              fontSize: '14px',
              fontWeight: '600',
              color: '#333',
              borderRight: '1px solid #f0f0f0'
            }}>项目名称</div>
            <div style={{
              padding: '12px',
              fontSize: '14px',
              fontWeight: '600',
              color: '#333',
              borderRight: '1px solid #f0f0f0'
            }}>结果</div>
            <div style={{
              padding: '12px',
              fontSize: '14px',
              fontWeight: '600',
              color: '#333'
            }}>参考值</div>
          </div>

          {/* 表格内容 */}
          {reportDetail.testResults.map((result, index) => (
            <div
              key={index}
              style={{
                display: 'grid',
                gridTemplateColumns: '2fr 1fr 1fr',
                borderBottom: index < reportDetail.testResults.length - 1 ? '1px solid #f0f0f0' : 'none'
              }}
            >
              <div style={{
                padding: '12px',
                fontSize: '14px',
                color: '#333',
                borderRight: '1px solid #f0f0f0'
              }}>{result.itemName}</div>
              <div style={{
                padding: '12px',
                fontSize: '14px',
                color: result.isAbnormal ? '#ff4d4f' : '#333',
                borderRight: '1px solid #f0f0f0',
                display: 'flex',
                alignItems: 'center',
                gap: '4px'
              }}>
                {result.result}
                {result.isHigh && <span style={{ color: '#ff4d4f' }}>⬆</span>}
                {result.isLow && <span style={{ color: '#ff4d4f' }}>⬇</span>}
              </div>
              <div style={{
                padding: '12px',
                fontSize: '14px',
                color: '#666'
              }}>{result.referenceValue}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 签名和备注 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: '16px',
          fontSize: '14px',
          color: '#666'
        }}>
          <span>检测人: {reportDetail.examiner}</span>
          <span>审核人: {reportDetail.reviewer}</span>
        </div>
        <div style={{
          fontSize: '14px',
          color: '#999',
          padding: '12px',
          background: '#f8f9fa',
          borderRadius: '8px',
          borderLeft: '4px solid #1677ff'
        }}>
          备注: {reportDetail.note}
        </div>
      </div>
    </div>
  )
}

export default TestReportDetail
